<!--
代码模板说明：
1.codeGenaratorExample 为例子用的实体名称，可批量替换掉
2.表单字段替换成自己业务的表单字段
3.请求地址自行替换
-->
<template>
  <div id="lap-app" v-loading="pFormLoading">
    <el-row class="lap-form-body">
      <!--基本表单信息-->
      <el-form ref="form" label-width="120px" :model="pFormData" :rules="rules">
        <el-row :gutter="10" v-if="!detailData">
          <el-col :span="12">
            <el-form-item label="表名" prop="Table">
              <el-autocomplete
                v-model="pFormData.Table"
                :fetch-suggestions="querySearchTableAsync"
                placeholder="请输入表名"
                style="width:100%"
                clearable
              ></el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段名" prop="Field">
              <el-autocomplete
                v-model="pFormData.Field"
                :fetch-suggestions="querySearchFieldAsync"
                placeholder="请输入字段名"
                style="width:100%"
                clearable
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" v-if="!!detailData">
          <el-col :span="24">
            <el-form-item label="触发器" prop="TriggerName">{{pFormData.TriggerName}}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="备注" prop="Remarks">
              <el-input
                type="textarea"
                v-model="pFormData.Remarks"
                auto-complete="off"
                size="mini"
                :autosize="{ minRows: 5, maxRows: 5}"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row class="lap-form-footer">
      <el-button
        type="primary"
        :disabled="pFormLoading"
        @click="(e)=>onSubmit(e,{close:true})"
      >提交&关闭</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  mixins: [$lap.FormView],
  name: "lap-app",
  components: {},
  props: ["detailData"],
  data() {
    return {
      title: "", //页面标题
      pPageFunctionCode: "", //页面功能编码
      pFormData: {
        Table: "",
        Field: "",
        Remarks: "",
      },
      /*表单校验规则 */
      rules: {
        Table: [{ required: true, message: "请输入表名" }],
        Field: [{ required: true, message: "请输入字段名" }],
      },
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      return Promise.resolve().then((data) => {
        that.pFormData = that.detailData
          ? Object.assign({}, that.pFormData, that.detailData)
          : that.pFormData;
      });
    },
    /**
     * 表名称查询建议
     */
    querySearchTableAsync(queryString, cb) {
      const that = this;
      clearTimeout(that.timeout);
      that.timeout = setTimeout(() => {
        $lap
          .post("/MLogXWeb/LogHandler.ashx", {
            type: "SearchTable",
            tablename: Base64.encode(that.pFormData.Table),
          })
          .then((data) => {
            cb(data);
          });
      }, 500);
    },
    /**
     * 字段查询建议
     */
    querySearchFieldAsync(queryString, cb) {
      const that = this;
      clearTimeout(that.timeout);
      that.timeout = setTimeout(() => {
        $lap
          .post("/MLogXWeb/LogHandler.ashx", {
            type: "SearchField",
            tablename: Base64.encode(that.pFormData.Table),
            fieldname: Base64.encode(that.pFormData.Field),
          })
          .then((data) => {
            cb(data);
          });
      }, 500);
    },
    /**
     * 提交数据
     */
    onSubmit(e, opts = {}) {
      const that = this;
      that.platFormValid("form", () => {
        return $lap
          .submit("/MLogXWeb/LogHandler.ashx", {
            type: that.detailData ? "UpdateTrigger" : "AddTrigger",
            trigger: Base64.encode(JSON.stringify(that.pFormData)),
          })
          .then((data) => {
            that.$emit("after-submit", data, opts);
          });
      });
    },
  },
};
</script>